<template>
  <div>
    <!-- 头部导航栏 -->
    <NavTop>
      <template #left>
        <van-icon name="arrow-left" class="animate__animated animate__fadeInLeft" @click="leftFn" />
      </template>
      <template #calendarbox2>
        <span>回收站({{ recycleDairyNub }})</span>
      </template>
      <template #right>
        <svg class="icon animate__animated animate__fadeInRight" aria-hidden="true" @click="rightFn">
          <use xlink:href="#icon-huishouzhan"></use>
        </svg>
      </template>
    </NavTop>
    <div class="bodyBox">
      <!-- 用户提示 -->
      <div class="tishi">
        <p>右滑选择恢复或者左滑删除日记</p>
      </div>
      <!-- 滑动 -->
      <van-swipe-cell v-for="(item, index) in recycleDairyList" :key="index">
        <!-- 日记 -->
        <div class="main-body animate__animated animate__fadeInUp" @click="logId(item, index)">
          <div class="body-left">
            <span>{{ item.week }}</span>
            <p>{{ item.date }}</p>
          </div>
          <div class="body-right">
            <div class="right-top">
              <span class="content" v-html="item.content" ></span>
            <span class="ellipsis" v-if="recycleDairyList[index].content.length >=289"></span>
            </div>
            <div class="right-body">
              <div v-if="recycleDairyList[index].imgurl === undefined || recycleDairyList[index].imgurl === null || recycleDairyList[index].imgurl <= 0"></div>
              <div v-else>
                <van-image fit="cover" v-for="(data, i) in recycleDairyList[index].imgurl.split('||')" :key="i" :src="data" />
              </div>
            </div>
            <div class="right-footer">
              <i v-show="recycleDairyList[index].wearther !== '获取天气失败'" :class="'qi-' + item.nowicon">&nbsp;·&nbsp;</i>
              <span>{{ item.time }}&nbsp;·&nbsp;</span>
              <span v-show="recycleDairyList[index].wearther !== '获取天气失败'">{{ item.wearther }}&nbsp;·&nbsp;</span>
              <span v-show="recycleDairyList[index].wearther !== '获取天气失败'">{{ item.temperature }}°C&nbsp;·&nbsp;</span>
              <span>{{ item.cityname }}</span>
            </div>
          </div>
        </div>
        <template #left>
          <van-button square color="#6ed9a2" text="恢复" @click="leftBtnFn(item, index)" />
        </template>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="rightBtnFn(item, index)" />
        </template>
      </van-swipe-cell>
      <!-- 分割线 -->
      <van-divider dashed :style="{ color: '#9e9e9e', borderColor: '#9e9e9e' }" v-show="true">到底了捏~</van-divider>
    </div>
  </div>
</template>

<script>
import NavTop from '@/components/home/homenNavTop.vue'
import { Toast, Dialog } from 'vant'
import { getRecycleDiaryApi, delRecycleDiaryApi, postRecycleDiaryApi, delRecycleAllDiaryApi } from '@/api/index'
export default {
  data () {
    return {
      // 回收站日记数据
      recycleDairyList: [],
      // 回收站日记 数量
      recycleDairyNub: '0'
    }
  },
  components: {
    NavTop
  },
  methods: {
    // 返回
    leftFn () {
      this.$router.replace('/home')
    },
    // 删除回收站所有日记
    async rightFn () {
      Dialog.confirm({
        message: '是否清空回收站'
      })
        .then(async () => {
          Toast.loading({
            message: '清空中ing...',
            forbidClick: true,
            duration: 0
          })
          try {
            const { data: res } = await delRecycleAllDiaryApi(this.$store.state.userInfoData.id)
            // console.log(res)
            if (res.status === 201) {
              this.recycleDairyList = []
              this.recycleDairyNub = 0
            }
          } catch (error) {
            Toast.fail('清空失败 稍后再试')
          }
          Toast.clear()
        })
        .catch(() => {
          // on cancel
        })
    },
    // 右滑 恢复 日记
    async leftBtnFn (item) {
      Toast.loading({
        message: '恢复日记ing...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await postRecycleDiaryApi(item.id, item.articleid)
        // console.log(res)
        if (res.status === 201) {
          // 恢复日记成功
          const { data: res } = await getRecycleDiaryApi(this.$store.state.userInfoData.id)
          // console.log(res)
          this.recycleDairyList = res.data
          // console.log(this.recycleDairyList + '///')
          if (this.recycleDairyList === undefined) {
            this.recycleDairyNub = 0
          } else {
            this.recycleDairyNub = this.recycleDairyList.length
          }
          Toast.clear()
        } else {
          Toast.fail('删除失败 稍后再试')
        }
      } catch (error) {
        Toast.fail('获取失败 稍后再试')
      }
    },
    // 左滑 删除 日记
    async rightBtnFn (item) {
      Toast.loading({
        message: '删除日记ing...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await delRecycleDiaryApi(item.id, item.articleid)
        // console.log(res.status)
        if (res.status === 201) {
          const { data: res } = await getRecycleDiaryApi(this.$store.state.userInfoData.id)
          // console.log(res)
          this.recycleDairyList = res.data
          // console.log(this.recycleDairyList + '///')
          if (this.recycleDairyList === undefined) {
            this.recycleDairyNub = 0
          } else {
            this.recycleDairyNub = this.recycleDairyList.length
          }
          Toast.clear()
        } else {
          Toast.fail('删除失败 稍后再试')
        }
      } catch (error) {
        Toast.fail('删除失败 稍后再试')
      }
    },
    // 点击 那个 日记
    logId (item, index) {
      this.$store.commit('setButtonShow', false)
      this.$router.replace('/userdiary')
      this.$store.commit('clickDiaryListFn', item)
    }
  },
  async activated () {
    Toast.loading({
      message: '刷新日记ing...',
      forbidClick: true,
      duration: 0
    })
    try {
      const { data: res } = await getRecycleDiaryApi(this.$store.state.userInfoData.id)
      if (res.status === 201) {
        this.recycleDairyList = res.data
        this.recycleDairyNub = this.recycleDairyList.length
        Toast.clear()
      }
      Toast.clear()
    } catch (error) {
      Toast.clear()
      Toast.fail('获取失败 稍后再试')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.top {
  background-color: #fff;
  position: fixed;
  z-index: 999;
}
.top .calendarbox2 span {
  font-size: 16px !important;
  padding: 14px !important;
  font-weight: 550;
  color: #646566;
  letter-spacing: 2px;
}
.bodyBox {
  padding: 0 20px;
  .tishi {
    font-size: 14px;
    text-align: center;
    color: #969799;
    padding: 70px 0 10px;
    letter-spacing: 2px;
    // margin-top: 60px;
  }
  .van-swipe-cell {
    .main-body {
      display: flex;
      margin: 20px 0;
      // padding-right: 5px;
      .body-left {
        width: 22%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-right: 10px;
        span {
          font-size: 13.5px;
          color: #969799;
        }
        p {
          font-size: 13px;
          color: #969799;
          padding-top: 5px;
        }
      }
      .body-right {
        background-color: #f2f3f5;
        width: 80%;
        border: 0.2px solid #ededed;
        box-shadow: 1px 1px 8px 0px #ededed;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        // max-height: 200px;
        min-height: 50px;
        .right-top {
          font-size: 15px;
          position: relative;
          color: #6d6d6d;
          .content {
            display: inline-block;
            white-space: normal;
            word-break: break-all;
            text-align: left;
            line-height: 22px;
            text-align: left;
            letter-spacing: 2px;
            overflow: hidden;
            max-height: 64px;
            padding-right: 11px;
          }
          .ellipsis::after {
            content: "...";
            display: inline;
          }
          .ellipsis {
            position: absolute;
            bottom: 5px;
            right: 4px;
          }
        }
        .right-body {
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 20px;
          div {
            display: flex;
            .van-image {
              width: 74px;
              height: 74px;
              padding-right: 2px;
              padding-left: 3px;
              /deep/.van-image__img {
                border-radius: 10px;
              }
            }
          }
        }
        .right-footer {
          font-size: 13px;
          color: #969799;
          padding-top: 15px;
        }
      }
    }
    /deep/.van-swipe-cell__right {
      right: -2px !important;
    }
    /deep/.van-swipe-cell__left {
      left: -2px !important;
    }
    .van-button {
      height: 100%;
    }
    .van-button--square {
      border-radius: 10px;
    }
  }
  /deep/.van-divider {
    margin: 50px 10px !important;
  }
}
</style>
